<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>SwiftAdmin 评论模块演示</title>
<meta http-equiv="Cache-Control" content="no-transform " />
<include file="public:header">
</head>
<!-- // 评论模块样式 -->
<style type="text/css">

.comment li {
    margin-bottom: 18px;
}

.comment .u_avatar {
    float: left;
    border-radius: 50%;
    width: 50px;
    margin-right: 22px;
}

.comment-post {
    margin: 18px auto;
    float: left;
    clear: both;
}

.comm_post_div {
    width: 650px;
    border: 1px solid #d6d6d6;
    position: relative;
    float: left;
}

.comm_content_text {
    width: 638px;
    resize: none;
    outline: 0;
    border: 0;
    font-size: 16px;
    line-height: 1.8;
    transition: all .4s;
    display: block;

    padding: 5px;
        padding-bottom: 5px; 
    height: 46px;
}

.agree-num {
    margin-left: 3px;
}

.post_comm_btn, .reply-post {
    float: right;
    border: 0;
    height: 100%;
    width: 100px;
    background: #f0183c;
    color: white;
    font-size: 16px;
    outline: 0;
    border-radius: 5px;
    height: 40px;
    margin-bottom: 3px;
    margin-right: 3px;
    cursor: pointer;
    margin-top: 3px;
}

.comment li .comment-main {
    float: left;
    width: 660px;
    padding-bottom: 8px;
    border-bottom: 1px solid #eee;
}

.comment li .comment-content-name {
    font-size: 13px;
    color: #1a1a1a;
    line-height: 22px;
    maring-top: 0;
    margin-bottom: 8px;
    font-weight: bold;
}

.comment li .comment-content-name span {
    margin-left: 15px;
    font-size: 13px;
    color: #b3b3b3;
    font-weight: normal;
}

.comment li .comment-content-epi a {
    color: #b3b3b3;
}

.comment li .comment-main-content {
    margin-bottom: 14px;
    word-wrap: break-word;
    word-break: break-all;
}

.comment li .comment-main-content p {
    font-size: 15px;
    color: #333;
    line-height: 22px;
    margin-top: 15px;
    margin-bottom: 18px;
}

.comment li .comment-btn-container {
    width: 100%;
    height: 20px;
    overflow: hidden;
    color: #b3b3b3;
}

.comment li a.good_sel, .comment li a.bad_sel, .comment li a.up, .comment li a.down, .comment li a.reply-btn {
    color: #b3b3b3;
    font-size: 13px;
    line-height: 13px;
    /*float: left;*/

}

.comment li span.reply-btn {
    cursor: pointer;
}


.comment li .bad {
    /*background: url(/images/style/bad_normal_pc.png) no-repeat;*/
    padding-left: 18px;
    background-size: 14px;
    margin-right: 20px;
}

.comment li .reply-btn {
    /*background: url(/images/style/chat_normal.png) no-repeat;*/
    background-size: 14px;
    padding-left: 18px;
}

.comment li .comment_t_list {
    background: #f4f5f6;
    padding: 10px 15px;
    margin-top: 10px;
}

.comment li a.mtlink {
    font-size: 14px;
    line-height: 26px;
    margin-top: 10px;
    color: #808080;
    /*background: url(/images/style/chat_more.png) no-repeat right;*/
    background-size: 14px;
    padding-right: 14px;
}

.comment li .material_rep_li {
    margin-bottom: 5px;
}

.comment li .material_rep_li .r_n,.comment li .material_rep_li .r_t {
    font-size: 13px;
    line-height: 24px;
    color: #999;
    margin-right: 10px;
}

.comment li .material_rep_li .r_c {
    font-size: 14px;
    color: #1a1a1a;
    line-height: 24px;
    margin: 0;
}

#replyHtml {
    width: 99%;
    border: 1px solid #c3c3c3;
    margin-top: 10px;
    overflow: hidden;
}

#replyHtml .reply-post {
    height: 30px;
    width: 81px;
    font-size: 14px;
}

#replyHtml .comm_content_text {
    font-size: 14px;
}


.comment a:link, .comment a:visited {
    color: #46b535;
    text-decoration: none;
}

.load_more_material, #showActor, .load_comment {
    border: 0;
    background: #f5f5f5;
    color: #46b537;
    font-weight: bold;
    font-size: 16px;
    border-radius: 2px;
    margin-top: 10px;
    text-align: center;
    width: 100%;
    height: 39px;
    line-height: 39px;
    display: block;
    clear: both;
}

.comment .btn-bar {
    background: #f4f5f6;
    overflow: hidden;
}

.comment .face {
    float: left;
    padding: 0 0 0 12px;
    cursor: pointer;
    margin: 12px 0 0 0;
}

.comment .face i {
	width: 25px;
    height: 25px;
    display: block;
    color: #666;
    font-size: 20px;
}

.comment .face i:hover {
    color: #000;
}


/*表情包开始*/
.comment .face-util {
    padding: 0;
    background-color: #fff;
    box-shadow: none;
    display: block;
    position: absolute;    
}

.comment .face-util ul {
    position: relative;
    width: 372px;
    padding: 10px;
    border: 1px solid #D9D9D9;
    background-color: #fff;
    overflow: hidden;
    box-shadow: 0 0 20px rgba(0,0,0,.2);
}

.comment .face-util li {
    cursor: pointer;
    float: left;
    height: 22px;
    width: 26px;
    text-align: center;
    border-width: 1px;
    border-style: solid;
    border-color: rgb(232, 232, 232);
    border-image: initial;
    overflow: hidden;
    margin: -1px 0px 0px -1px;
    padding: 4px 2px;
    margin-bottom: 0px;
}

.comment .face-util ul li:hover {
    position: relative;
    z-index: 2;
    border: 1px solid #eb7350;
    background: #fff9ec;
}

a.mtlink {
    font-size: 14px;
    line-height: 26px;
    margin-top: 10px;
    color: #808080;
    background-size: 14px;
    padding-right: 14px;
	clear: both;
    display: block;
}

/*表情包结束*/
/*评论结束*/	
</style>

<body>
<div id="header">
	<include file="public:nav"/>
</div>

<div id="content" class="comment" >
	<div class="layui-container comment">
	  <div class="layui-row ">

		<form class="comment-post" action="/index.php/comment/insert" >
			<input type="hidden" id="cid" name="cid" value="1" >      <!-- 隐藏域 -->					
			<input type="hidden" id="sid" name="sid" value="2" >      <!-- 隐藏域 -->
			<img src="{$user.face|default='/static/images/user_default.jpg'}" class="comment-user-img u_avatar">
		    <div class="comm_post_div">
		      <textarea class="comm_content_text" name="content" value="我是评论的数据" placeholder="我要评论" style="height: 100px;"></textarea>
		      <div class="btn-bar clear">
		      	<span class="fl face"><i class="layui-icon layui-icon-face-smile-b"></i></span>
		        <input type="submit" value="评论" class="post_comm_btn">
		      </div>
		    </div>
		</form>
        
		<!-- 评论列表 -->
		<div class="comment_list_main clear">
			<ul class="material_comment_lst" s="0" load="1">
				<php> 
					$list = mysql_comment('cid:1;sid:2;limit:10;'); 
				</php>
				<volist name="$list['data']" id="vo">
				<li class="material_comment clear">
					<img src="{$vo.avatar|default='/static/images/user_default.jpg'}" class="u_avatar">
					<div class="comment-main">
						<p class="comment-content-name"> {$vo.name|default='游客'} <span>{$vo.createtime}</span></p>
						<div class="comment-main-content"><p>{$vo.content|raw}</p></div>
						<div class="comment-btn-container clear">
							<a href="javascript:;" class="up" id="{$vo.id}"  >赞<span class="agree-num">{$vo.up}</span></a>
							<a href="javascript:;" class="down" id="{$vo.id}" >踩<span class="agree-num">{$vo.down}</span></a>
							<a href="javascript:;" pid={$vo.id} rid="{$vo.id}" class="reply-btn" name="{$vo.name|default='游客'}">回复</a>
						</div>
						<notempty name="$vo['_child']" >
						<ul class="comment_t_list">
							<volist name="$vo['_child']" id="_child_v">
							<li class="material_rep_li">
								<div class="clearfix">
									<span class="r_n fl">
										{$_child_v.name|default='游客'}
										<if $_child_v.rid != $_child_v.pid >回复：{$_child_v.replyname}</if>
									</span>
									<span pid={$_child_v.pid} rid="{$_child_v.id}" name="{$_child_v.name|default='游客'}" class="reply-btn r_t fr" >回复</span>
									<span class="r_t fr">{$_child_v.createtime}</span>
								</div>
								<p class="r_c" style="margin-left: 10px;">{$_child_v.content|raw}</p>
							</li>
							</volist>
						</ul>
						</notempty>
					</div>
				</li>
				</volist>
				<a class="load_comment" href="javascript:;" sort="hot" page="1">更多评论</a>
			</ul>
			</div>
	  </div>
	</div>
</div>

<include file="public:footer"/>
</body>
<script>
	// 这个页面是一个评论的demo实例
	layui.use(['jquery','layer'],function(){
		var $ = layui.jquery;
		var layer = layui.layer;

		// 在这里判断是否为登录状态



	})
</script>	
</html>